<template>
  <div class="t-data-card">
    <div class="t-data-card-head">
      <div>{{ props.title }}</div>
      <el-tag :type="props.tagType">{{ props.tagLabel }}</el-tag>
    </div>
    <div class="t-data-card-body">
      <div class="t-data-card-body-num">
        <el-statistic title="" :value="baseValueDym" value-style="font-size: 26px"/>
      </div>
      <svg-icon v-if="props.iconName" class="t-data-card-icon" :icon-class="props.iconName"/>
    </div>
    <div class="t-data-card-total">
      <div>总访问量</div>
      <div>
        <el-statistic title="" :value="totalValueDym" value-style="font-size: 14px; color: #999999;"/>
      </div>
    </div>
  </div>
</template>

<script setup name="DataCard">
import { TransitionPresets, useTransition } from '@vueuse/core'

const props = defineProps({
  title: String,
  iconName: String,
  tagLabel: String,
  tagType: {
    type: String,
    default() {
      return ''
    }
  },
  value: {
    type: Number,
    default: 0
  },
  totalValue: {
    type: Number,
    default: 0
  }
});

// 开启动态效果
const baseValueDym = useTransition(() => props.value, {
  duration: 500,
  transition: TransitionPresets.linear,
});

// 开启动态效果
const totalValueDym = useTransition(() => props.totalValue, {
  duration: 500,
  transition: TransitionPresets.linear,
})

</script>


<style scoped lang="scss">
.t-data-card {
  background-color: #ffffff;
  border-radius: 8px;

  &-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 16px;
    color: rgba(0, 0, 0, 0.8);
  }

  &-body {
    padding: 10px 24px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-num {
      font-size: 26px;
    }
  }

  &-total {
    padding: 0 24px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #999999;
  }

  &-icon {
    width: 40px;
    height: 40px;
  }
}
</style>
